@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic);

body {
    font: 1em/1.8 'Source Sans Pro', sans-serif;
    color: $body_font;
    @media (min-width: $tablet) {
        font-size: 1.15em;
        line-height: 1.9;
    }
}

a {
    color: $link;
}

h1, h2, h3, h4, h5, h6 {
    color: $headings;
    margin-bottom: 0.5em;
    line-height: 1.2em;
}

h1 {
    font-size: 2.33em;
    @media (min-width: $tablet ) {
        font-size: 3em;
    }
}

h2 {
    font-size: 2em;
    @media (min-width: $tablet ) {
        font-size: 2.33em;
    }
}

h3 {
    font-size: 1.66em;
}

h4 {
    font-size: 1.33em;
}

h5 {
    font-size: 1.125em;
}

h6 {
    font-size: 1em;
}

// larger margin to space out new sections within the article.
p+h2, ul+h2, table+h2, img+h2, pre+h2,
p+h3, ul+h3, table+h3, img+h3, pre+h3,
p+h4, ul+h4, table+h4, img+h4, pre+h4,
p+h5, ul+h5, table+h5, img+h5, pre+h5,
p+h6, ul+h6, table+h6, img+h6, pre+h6 {
    margin-top: 4rem;
}

p, ol, ul {
    margin-top:0;
    margin-bottom: 1.4em;
}

ol,ul {
    padding-left: 1.4em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

pre {
    background: $grayLighter;
    padding: 1em;
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;
    margin-bottom: 1.4em;
}

code {
    background: $grayLighter;
    padding: 0.1em 0.25em;
}

kbd {
    background: $grayLighter;
    padding: 0.25em;
    border: 1px solid $grayDarker;
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}
.post {
    @extend %row-narrow;

    .page-header {
        margin-bottom: 1.5em;
    }

    .post-title {
        margin-bottom: 0;
    }

    .post-meta {
        font-size: .85em;
        color: lighten($body_font, 20%);
    }

    .page-header+p,
    .page-header+blockquote {
        font-size: 1.2em;
    }

    .button-edit {
        background: $grayLighter;
        padding: 0.1em 0.5em;
        font-size: 0.8em;
        color: #222;
        text-decoration: none;
        border-radius: 3px;
        display: inline-block;
        margin-right: 0.25em;
        transition: background 0.2s;

        .icon {
            font-size: 1.2em;
            vertical-align: text-top;
            margin-right: 0.25em;
        }

        &:hover {
            background: darken($grayLighter, 10%);
        }
    }

    img {
        display: block;
        max-width: 100%;
        margin: 1.6em auto;
    }

}
